<template>
  <div class="wrap">
    <h3>个人资料</h3>
    <div class="info" v-show="show">
      <div class="info-tx">
        <span class="span">当前头像 :</span>
        <img src="../../../static/zwf/mine/touxiang.png" />
        <button class="btn1">修改</button>
      </div>
      <div class="info-nic">
        <span class="span">昵称 :</span>
        <input type="text" disabled  v-model="name">
      </div>
      <div class="info-sex">
        <span class="span">性别 :</span>
        <span class="sp">{{this.gender==0?'男':'女'}}</span>
      </div>
      
      <div class="info-bir">
        <span class="span">生日 :</span>
        <input type="date" v-model="bir">
      </div>

      <div class="info-phone">
        <span class="span">手机号 :</span>
        <input type="text" disabled v-model="phone">
        <router-link to="/changephone">
          <button class="btn2">更换手机</button>
        </router-link>
      </div>
      <button class="submit">确认提交</button>
    </div>

    <p class="pp" v-show="show1">暂无数据,请登录</p>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Info",
      data(){
          return{
            phone:'',
            bir:'',
            name:'',
            gender:'',
            show:true,
            show1:false,
          }
      },
      mounted(){
        this.phone=this.$store.state.phone;
        var params=new URLSearchParams();
        params.append('iphone',this.$store.state.phone);

        axios.post('/api/firday/userinfo.php',params).then(res=>{

          var arr1=res.data;
          this.gender=arr1[0].gender;
          this.name=arr1[0].user_name;
          this.bir=arr1[0].birthday;
        })

        if(this.$store.state.phone==''){
          this.show=false;
          this.show1=true;
        }else{
          this.show=true;
          this.show1=false;
        }
      }
    }
</script>

<style scoped>
  .wrap{
    width: 1083px;
    height: 623px;
    border: 1px solid #e7e7e7;
  }
  .wrap h3{
    width: 1063px;
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    font-size: 18px;
    color: #212121;
    border-bottom: 1px solid #e7e7e7;
  }

  .info .span{
    display: inline-block;
    width: 126px;
    height: 35px;
    line-height: 35px;
    text-align: right;
    font-size: 18px;
    margin-right: 15px;
  }
  .info input[type=text]{
    width: 170px;
    height: 33px;
    border: 1px solid #d3d3d3;
    font-size: 14px;
    vertical-align: bottom;
  }

  .info-tx{
    margin-top: 30px;
    height: 96px;
    line-height: 96px;
    margin-right: 10px;
  }
  .info-tx img{
    width: 80px;
    height: 80px;
    vertical-align: top;
    margin-right: 10px;
  }
  .btn1{
    font-size: 14px;
    background: #fff;
    color: #4b943d;
    cursor: pointer;
  }
  .info-nic{
    margin-bottom: 10px;
  }
  .info-sex{
    margin-bottom: 10px;
  }
  .info-sex .sp{
    font-size: 18px;
  }

  .info-bir{
    margin-bottom: 10px;
  }



  /*----------用来移除向下箭头----------*/
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
  }

  /*----------用来移除上下箭头----------*/
  input[type="date"]::-webkit-inner-spin-button {
    display: none;
  }

  /*----------用来移除叉叉按钮----------*/
  input[type="date"]::-webkit-clear-button {
    display: none;
  }
  .info-bir input{
    font-size: 18px;
    padding-bottom: 7px;
  }

  .info input[type=radio]{
    font-size: 14px;
  }
  .submit{
    width: 150px;
    height: 50px;
    background: #f08200;
    color: #fff;
    font-size: 20px;
    border-radius: 5px;
    margin-top: 40px;
    margin-left: 141px;
  }
  .btn2{
    margin-left: 15px;
    font-size: 16px;
    color: #579b4a;
    background: #fff;
    cursor: pointer;
  }


  .pp{
    width: 1083px;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #e9e9e9;
    text-align: center;
  }

</style>
